<template>
  <div>
    <el-dialog title="派单" :visible.sync="visible" width="1000px">
      <el-tabs type="border-card" v-model="activeName">
        <el-tab-pane name="platform" label="派给六鸽师傅"
          ><TheQueryForm
            :option="searchOption"
            @onSubmit="onSubmit"
            @onClear="onClear"
          ></TheQueryForm>
          <TheTable
            :tableOption="tableOption"
            :pageNo.sync="pageNo"
            :limit.sync="limit"
            :api="queryPageApi"
            :queryParams="queryParams"
          />
        </el-tab-pane>
        <el-tab-pane name="outSource" label="同步服务商" v-if="serviceOrderId">
          <Synchronous v-if="serviceOrderId"
            ref="synchronousRefs"
            :serviceOrderId="serviceOrderId"
            @synchronous="onSynchronous"
          />
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="师傅服务类目和报价"
      :visible.sync="dialogClassify"
      width="30%"
      modal-append-to-body
      center
    >
      <div class="content">
        <div
          class="item"
          v-for="(item, index) in classifyData"
          :key="'info_dialog_' + index"
          :style="'margin-bottom: 5px;text-align:center'"
        >
          <el-tag
            size="small"
            style="margin-right: 5px"
            :type="item.workerCategoryState === 'YES' ? 'success' : 'danger'"
            >{{ item.workerCategoryState | filterUserState }}</el-tag
          >
          <span class="name">{{ item.serviceCategoryFullName }}:</span>
          <span class="price">{{ item.price | filterPriceFormat }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogClassify = false">关 闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="服务区域"
      :visible.sync="dialogArea"
      width="30%"
      modal-append-to-body
      center
    >
      <div class="content">
        <div
          class="item"
          v-for="(item, index) in areaData"
          :key="'info_' + index"
        >
          <span
            class="state"
            style="padding-left: 13px"
            v-if="
              index > 0 && item.serviceLevel == areaData[index - 1].serviceLevel
            "
            >:</span
          >
          <span class="state" v-else
            >{{ item.serviceLevel | filterAreaWeight }}:</span
          >
          <span class="name">{{ item.serviceAreaName }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogArea = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { apiWorkerCanReceiveList, apiCommonDistrict } from "@/api/worker.js";
import ClassifyOfPrice from "@/views/worker/person/components/classifyOfPrice.vue";
import ServiceArea from "@/views/worker/person/components/serviceArea.vue";
import Synchronous from "./components/synchronous.vue";
import { filterPriceFormat } from "@/filters/index";
export default {
  components: { ClassifyOfPrice, ServiceArea, Synchronous },
  props: {
    serviceOrderId: {
      type: String,
      default: "",
    },
  },
  data() {
    const _this = this;
    return {
      visible: false,
      dialogArea: false,
      areaData: [],
      dialogClassify: false,
      classifyData: [],
      activeName: "platform",
      queryParams: {},
      pageNo: 1,
      limit: 10,
      queryPageApi: apiWorkerCanReceiveList,
      searchOption: [
        {
          type: "Input",
          field: "workerName",
          label: "师傅姓名",
          placeholder: "请输入师傅姓名",
        },

        {
          type: "Cascader",
          field: "serviceAreaId",
          label: "服务区域",
          placeholder: "服务区域",
          required: false,
          optionsKey: "name",
          optionsValue: "id",
          params: { pid: 0 },
          width: "400px",
          props: {
            checkStrictly: true,
            lazy: true,
            multiple: true,
            async lazyLoad(node, resolve) {
              let field = "";
              if (node.level > 0) {
                field = node.config.field;
              }
              const nodes = await _this.getDistrict(node.value || 0, field);
              resolve(nodes);
            },
          },
          defaultValue: "",
        },
      ],
      tableOption: [
        {
          label: "师傅id",
          prop: "workerId",
          width: 100,
        },
        {
          label: "师傅信息",
          prop: "info",
          width: 220,
          render(createElement, { row }) {
            const dom = (
              <div class="row">
                <div class="span4">
                  <el-avatar
                    style="width:80px;height:80px;"
                    src={row.avatar}
                  ></el-avatar>
                </div>
                <div class="span20">
                  <div>{row.workerName}</div>
                  <div>{row.userPhoneNumber}</div>
                </div>
              </div>
            );
            return dom;
          },
        },
        {
          label: "服务类目和报价",
          prop: "contractId",
          width: 250,
          render(createElement, { row }) {
            try {
              return createElement("el-row", [
                createElement(ClassifyOfPrice, {
                  domProps: {},
                  props: {
                    info: row.category,
                  },
                  on: {
                    trigger() {
                      _this.classifyData = row.category;
                      _this.$nextTick(() => {
                        _this.dialogClassify = true;
                      });
                    },
                  },
                }),
              ]);
            } catch (error) {
              return <div></div>;
            }
          },
        },
        {
          label: "服务区域",
          prop: "area",
          width: 250,
          render(createElement, { row }) {
            try {
              const info = [
                ...row.importTant,
                ...row.precedence,
                ...row.ordinary,
              ];
              return createElement("el-row", [
                createElement(ServiceArea, {
                  domProps: {},
                  props: {
                    info: info,
                  },
                  on: {
                    trigger() {
                      _this.areaData = info;
                      _this.$nextTick(() => {
                        _this.dialogArea = true;
                      });
                    },
                  },
                }),
              ]);
            } catch (error) {
              return <div></div>;
            }
          },
        },
        {
          label: "累计完成订单",
          prop: "orderCount",
          width: 70,
        },
        {
          label: "30天完成订单",
          prop: "monthOrderCount",
          width: 70,
        },
        {
          label: "保证金",
          prop: "securityDeposit",
          width: 100,
          formatter({ securityDeposit }) {
            return securityDeposit ? filterPriceFormat(securityDeposit) : "--";
          },
        },
        {
          label: "入驻时间",
          width: 100,
          prop: "createTim5e",
          render(createElement, { row }) {
            try {
              const strArr = row.auditTime.split(" ");
              const dom = (
                <div class="">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          },
        },

        {
          label: "操作",
          width: 80,
          prop: "operate",
          fixed: "right",
          render(createElement, { row }) {
            return createElement("el-row", [
              createElement("el-link", {
                domProps: {
                  innerHTML: "派单",
                },
                props: {
                  type: "primary",
                },
                on: {
                  click() {
                    _this.$emit("sendOrder", row);
                  },
                },
              }),
            ]);
          },
        },
      ],
    };
  },
  mounted() {},
  methods: {
    onSynchronous(row) {
      this.$emit("synchronous", row);
    },
    onShow() {
      this.visible = true;
    },
    onClose() {
      this.queryParams = {};
      this.visible = false;
    },
    onSubmit({ values }) {
      const serviceAreaId = values.serviceAreaId.map((item) => {
        return item[item.length - 1];
      });
      if (serviceAreaId.length > 0) {
        this.queryParams = { ...values, serviceAreaId };
      } else {
        delete values.serviceAreaId;
        this.queryParams = { ...values };
      }
    },
    onClear() {
      this.queryParams = {};
    },
    getDistrict(pid, field) {
      return new Promise((resolve, reject) => {
        apiCommonDistrict({ pid })
          .then((res) => {
            resolve(
              res.data.map((item) => {
                return {
                  value: item.id,
                  label: item.name,
                  type: item.level,
                  leaf:
                    field && field === "common"
                      ? item.level == "area"
                      : item.level == "street",
                };
              })
            );
          })
          .catch((err) => {
            reject([]);
          });
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-tabs__content {
  height: 60vh;
}
::v-deep .row {
  display: flex;
  align-items: center;
  .span4 {
    flex: 1;
    margin-right: 20px;
  }
  .span20 {
    flex: 5;
    text-align-last: left;
  }
}
.content {
  .item {
    display: flex;
    align-items: center;
    padding-left: 50px;
    margin-bottom: 10px;
  }
}
</style>
